<template>
  <div class="navbar">
    <div @click="showTool">
      <i class="iconfont icon-tool"></i><span>工具箱</span>
    </div>
    <div @click="showEvent">
      <i class="iconfont icon-event"></i><span>事件</span>
    </div>
    <div @click="showNotice">
      <i class="iconfont icon-notice"></i><span>公告</span>
    </div>
    <div @click="showUser">
      <i class="iconfont icon-user"></i><span>我的</span>
    </div>
  </div>
  <tools-box :toolShow="toolShow" @close-tool="closeTool"></tools-box>
  <event-box :eventShow="eventShow" @close-event="closeEvent"></event-box>
  <user-msg :userShow="userShow" @close-user="closeUser"></user-msg>
  <show-notice
    :noticeShow="noticeShow"
    @close-notice="closeNotice"
  ></show-notice>
</template>
<script setup>
//导入工具箱组件
import ToolsBox from "./components/ToolsBox.vue"
//导入事件组件
import EventBox from "./components/EventBox.vue"
//导入我的组件
import UserMsg from "./components/UserMsg.vue"
//导入公告组件
import ShowNotice from "./components/ShowNotice.vue"
import { useNavBar } from "./hooks/useNavBar"
const {
  showTool,
  toolShow,
  closeTool,
  showEvent,
  eventShow,
  closeEvent,
  showUser,
  userShow,
  closeUser,
  showNotice,
  noticeShow,
  closeNotice,
} = useNavBar()
</script>
<style lang="stylus" scoped>
@import 'http://at.alicdn.com/t/c/font_3789415_8zzy6febgho.css'
.navbar
  position fixed
  bottom 0
  display flex
  width 100vw
  height 8vh
  text-align center
  background-color #fff
  div
    display flex
    flex-direction column
    flex 1
    font-size 12px
    justify-content center
    font-weight 600
    // border-left 1px solid #eee
    color #757575
    i
      font-size 20px
      font-weight 300
      margin-bottom 5px
</style>
